<template>
	<view>
		<Header :showBack="canBack" :title="navigatorTitle"></Header>
		<!-- 除娄底、湘乡以外，其他城市请通过扫学校二维码添加数据 -->
		<view class="container">
			<view class="form">
				<view v-for="(item,index) in list" :key="index">
					<view>{{item.name}}:</view>
					<view @click="showSelector(index)" class="right-ipt">
						<view style="width: 100%;height: 100%;line-height: 60upx;">{{item.value}}</view>
						<image class="icon-up" src="../../static/img/go.png" mode=""></image>
					</view>
				</view>

				<view>
					<view>姓名</view>
					<view class="user-name">
						<input style="width: 100%; height: 100%;" type="text" v-model="childName" placeholder="请输入姓名或者别名"
							placeholder-class="user-name-pla" />
					</view>
				</view>
				<view>
					<view>电话</view>
					<view class="user-name">
						<input style="width: 100%; height: 100%;" type="text" v-model="inputPhone" placeholder="请输入电话"
							placeholder-class="user-name-pla" />
					</view>
				</view>
				<view class="attention">注：1.签约前，请认真阅读《用户服务协议》《隐私协议》。</view>
				<view class="attention">2.您可以选择刷脸或刷卡方式注册，具体操作可咨询运营商<span v-if="info.organizationPhone">，电话：{{info.organizationPhone}}</span>。</view>
				<view class="btn-box">
					<button @click="showErrToast('请先勾选用户协议')" type="default" class="formet-btn left-btn" v-if="!agree">刷卡服务注册</button>
					<button @click="addStudent(loginPhone,true)" type="default" class="formet-btn left-btn" v-if="agree && havePhone">刷卡服务注册</button>
					<button @click="showErrToast('请填写完整资料')" type="default" class="formet-btn left-btn" v-if="agree && !havePhone && !isABNotEmpty">刷卡服务注册</button>
					<button @click="summit(true)" class="formet-btn left-btn" v-if="agree && !havePhone && isABNotEmpty">刷卡服务注册</button>
					
					<button @click="showErrToast('请先勾选用户协议')" type="default" class="formet-btn right-btn" v-if="!agree">刷脸服务注册</button>
					<button @click="addStudent(loginPhone,false)" type="default" class="formet-btn right-btn" v-if="agree && havePhone">刷脸服务注册</button>
					<button @click="showErrToast('请填写完整资料')" type="default" class="formet-btn right-btn" v-if="agree && !havePhone && !isABNotEmpty">刷脸服务注册</button>
					<button class="formet-btn right-btn"  @click="summit(false)" v-if="agree && !havePhone && isABNotEmpty">刷脸服务注册</button>
				</view>
				
				
				
			</view>
			<view class="button-box" @click="checkAgree">
				<view>
					<checkbox-group>
						<checkbox :checked="agree" style="transform:scale(0.8) ;" />
					</checkbox-group>
					<view class="text" style="font3-size: 24upx;color: #909399;bottom: 50upx;">
						您已阅读并同意
						<text @click.stop="toagreement" style="color: #007AFF;">《用户服务协议》</text>
						<text @click.stop="openPrivacyContract" style="color: #007AFF;">，《隐私协议》</text>
					</view>
				</view>
			</view>

			<view v-if="!canBack" class="beizhu">
				备注：在系统中不存在的会员数据，在此输入相关信息进行新增操作，以匹配微信代扣数据。
			</view>
		</view>

		<view v-show="show" class="zzc" @click.stop="close">
			<view @click.stop="">
				<view class="btn">
					<view @click="close">取消</view>
					<view @click="choose" style="color: #007AFF;">确定</view>
				</view>
				<view class="search">
					<input type="text" value="" v-model="word" placeholder="搜索" />
				</view>
				<view class="box">
					<picker-view class="picker-area" @pickstart="disable=true" @pickend="disable=false" @change="changeX">
						<picker-view-column>
							<view class="item" v-if="item.name?item.name.includes(word):false" v-for="(item,index) in list[curIndex].list" :key="index">
								{{item.name}}
							</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		<privacyPop :popShow='popShow' @agreePrivacy='agreePrivacy'></privacyPop>
	</view>
</template>

<script>
	var WXBizDataCrypt = require('@/utils/RdWXBizDataCrypt.js');
	import { decryptPhone } from '@/services/phoneDecryption.js'
	import privacyPop from "@/components/privacy-pop/privacy-pop.vue"
	export default {
		components:{
			privacyPop
		},
		data() {
			return {
				popShow: false,
				navigatorTitle: '绑定多个',
				agree: false,
				word: '',
				show: false,
				appId: getApp().globalData.appId,
				sessionkey: uni.getStorageSync('sk'),
				canBack: false,
				childName: '',
				inputPhone: '',
				isGZH: 0,
				urlList: [
					'/common/api/area/getProvinceList',
					'/common/api/area/getCityList',
					'/common/api/area/getAreaList',
					'/member/api/organization/list',
					'/member/api/organization/list'
				],
				curIndex: 0,
				changeIndex: 0,
				list: [
					{ name: '省', value: '请选择', list: [], changeId: '' },
					{ name: '市', value: '请选择', list: [{}], changeId: '' },
					{ name: '区', value: '请选择', list: [], changeId: '' },
					{ name: '学校', value: '请选择', list: [], changeId: '' },
					{ name: '班级', value: '请选择', list: [], changeId: '' }
				],
				disable: false,
				havePhone: false,
				loginPhone: '',
			}
		},
		onLoad(e) {
			this.init(e)
		},
		computed: {
		  isABNotEmpty() {
		    return this.list[4].changeId && this.childName.trim() && this.inputPhone;
		  }
		},
		methods: {
			init(e){
				if(e.title){
					this.navigatorTitle = e.title
				}
				if(e.loginPhone){
					this.havePhone = true;
					this.loginPhone = e.loginPhone
					this.inputPhone = e.loginPhone
				}
				wx.getPrivacySetting({
					success: res => {
						// this.isAuthor = res.needAuthorization
						this.protocol = res.privacyContractName
					}
				})
				if (e.canBack == 1) {
					this.canBack = true
				}
				if (e.isGZH == 1) {
					this.isGZH = 1
				}
				this.getList(0)
			},
			agreePrivacy(){
				this.popShow = false;
				this.agree = true
			},
			checkAgree(){
				this.agree = !this.agree;
				this.popShow = !this.popShow;
			},
			openPrivacyContract() {
				wx.openPrivacyContract({
					success: (res) => {
					},
				})
			},
			handleDisagree() {
				this.showPrivacyMask = false
			},
			handleAgree() {
				this.showPrivacyMask = false
			},
			toagreement() {
				uni.navigateTo({
					url: '/pages/agreement/agreement'
				})
			},
			showErrToast(title) {
				uni.showToast({
					icon: 'none',
					title: title
				})
			},
			close() {
				if (this.disable) return;
				this.show = false
			},
			choose() {
				if (this.disable) return;
				if (this.word) {
					let nameList = this.list[this.curIndex].list.map((item) => {
						return item.name;
					})
					let searchList = nameList.filter((item) => {
						if (item.includes(this.word)) {
							return item
						}
					})
					if (searchList.length > 0) {

						this.change(nameList.indexOf(searchList[this.changeIndex]))
					}
				} else {
					this.change(this.changeIndex)
				}
				this.show = false
			},
			changeX(e) {
				if (this.changeIndex != e.detail.value[0]) {
					this.changeIndex = e.detail.value[0]
				}
				this.disable = false
			},
			showSelector(index) {
				if (this.curIndex != index) {
					this.word = '随便写个什么反正是重置picker-view'
					this.$nextTick(() => {
						this.curIndex = index
						this.word = ''
					})
				}
				this.$nextTick(() => {
					this.show = true
				})
			},
			change(x) {
				if (this.list[this.curIndex].list.length > 0) {
					this.list[this.curIndex].value = this.list[this.curIndex].list[x].name
					this.list[this.curIndex].changeId = this.list[this.curIndex].list[x].id
					for (let i = this.curIndex + 1; i < this.list.length; i++) {
						this.list[i].value = '请选择'
						this.list[i].changeId = ''
					}
					if (this.curIndex != 4) {
						this.getList(this.curIndex + 1)
					}
				}
			},
			getList(index) {
				if (index > 0 && this.list[index - 1].changeId == '') return;
				let data, name
				switch (index) {
					case 0:
						data = {
							"condition": {}
						}, name = 'provinceName'
						break;
					case 1:
						data = {
							"condition": {
								"fatherID": this.list[0].changeId
							}
						}, name = 'cityName'
						break;
					case 2:
						data = {
							"condition": {
								"fatherID": this.list[1].changeId
							}
						}, name = 'areaName'
						break;
					case 3:
						data = {
							"condition": {
								"areaId": this.list[2].changeId,
								"isOrganization": true
							}
						}, name = 'organizationName'
						break;
					case 4:
						data = {
							"condition": {
								"parentId": this.list[3].changeId
							}
						}, name = 'organizationName'
						break;
					default:
						break;
				}
				this.$http(this.urlList[index], data, res => {
					if (res.data.items.length > 0) {
						let arr = []
						res.data.items.forEach((item) => {
							arr.push({
								name: item[name],
								id: item.id
							})
						})
						arr.unshift({
							name: '请选择',
							id: ''
						})
						this.list[index].list = arr
					}
				})
			},
			goCard() {
				uni.navigateTo({
					url: '/pages/addCard/addCard'
				})
			},
			registerFun(phone,isCard){
				let that = this;
				this.$http('/minprogram/api/member/getStudentInfo', {
					schoolId: this.list[3].changeId,
					gradeId: this.list[4].changeId,
					ownerName: this.childName.trim()
				}, async res => {
					if (res.data.phone) {
						let signPhone = await decryptPhone(res.data.phone,this)
						if (signPhone == phone) {
							uni.showToast({
								title: '请勿重复添加',
								icon: 'none'
							})
						} else {
							if (res.data.isSign) {
								uni.showToast({
									title: '该学生已签约',
									icon: 'none'
								})
							} else {
								uni.showModal({
									content: '抱歉~该学生绑定号码与本机号码不一致，建议使用资料中预留号码开通，或自行修改号码。',
									cancelText: '我知道了',
									confirmText: '立即修改',
									success: function(suc) {
										if (suc.confirm) {
											uni.navigateTo({
												url: `/pages/changePhone/changePhone?oldPhone=${signPhone}&newPhone=${phone}&ownerName=${that.childName.trim()}&gradeId=${that.list[4].changeId}&organizationId=${that.list[3].changeId}&id=${res.data.id}&schoolName=${that.list[3].value}&className=${that.list[4].value}&isGZH=${that.isGZH}`
											})
										} else if (suc.cancel) {
										}
									}
								});
							}
						}
					} else {
						this.$http('/minprogram/api/member/saveOwnerStudent', {
							"ownerName": this.childName.trim(),
							"organizationId": this.list[3].changeId,
							"gradeId": this.list[4].changeId,
							isCard
						}, res1 => {
							if (res1.data.value) {
								if (this.isGZH == 1) {
									uni.reLaunch({
										url: '/pages/niuniuIndex/niuniuIndex?type=2'
									})
								} else {
									uni.reLaunch({
										url: '/pages/index/index?type=2'
									})
								}
							}
						})
					}
				}, 'GET')
			},
			addStudent(phone,isCard){
				let that = this;
				let text = this.info.organizationPhone?`，联系电话：${this.info.organizationPhone}`:''
				if(isCard===true){
					uni.showModal({
						title: '温馨提示',
						confirmText: '继续',
						cancelText: '返回',
						content: `您选择的是刷卡操作，确定需要继续或者请联系运营商协助${text}，继续，就进入刷卡，返回重新选择`,
						success: (res) => {
							if(res.confirm){
								this.registerFun(phone,isCard)
							}
						}
					})
				}else{
					this.registerFun(phone,isCard)
				}
			},
			summit(isCard) {
				this.addStudent(this.inputPhone,isCard)
			}
		}
	}
</script>

<style scoped lang="less">
	.form {
		background-color: #fff;
		border-radius: 8upx;
		padding: 40upx 0 68upx;
		box-shadow: 0 3upx 20upx 1upx rgba(247, 200, 122, .2);
		>view {
			width: 100%;
			display: flex;
			height: 100upx;
			align-items: center;
			justify-content: center;
			font-size: 30upx;
			>view:first-child {
				line-height: 100upx;
				height: 100upx;
				width: 100upx;
			}
			>view:last-child {
				width: 460upx;
				height: 60upx;
				padding: 0 20upx;
			}
		}
		.formet-btn {
			background: #49b9ad;
			color: #fff;
		}
	}
	button {
		background-color: #2BAC6B;
		width: 90%;
		height: 80upx;
		line-height: 80upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		margin: 30upx auto;
		border-radius: 10upx;
	}
	.button {
		width: 90%;
		height: 96upx;
		line-height: 96upx;
		text-align: center;
		color: #FFFFFF;
		font-size: 30upx;
		margin: 30upx auto;
		border-radius: 10upx;
	}
	.right-ipt {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #888;
		background: #f7f7f7;
		font-size: 24upx;
		.icon-up {
			transform: rotate(90deg);
			width: 20upx;
			height: 20upx;
		}
	}
	.user-name {
		background: #f7f7f7;
		color: #888;
		font-size: 22upx;
	}
	.zzc {
		width: 100vw;
		height: 100vh;
		position: fixed;
		top: 0;
		background-color: rgba(0, 0, 0, 0.4);
		z-index: 100;
		>view {
			width: 100%;
			height: 700upx;
			background-color: #FFFFFF;
			position: absolute;
			bottom: 0;
			box-sizing: border-box;
			>view.btn {
				width: 100%;
				height: 80upx;
				display: flex;
				justify-content: space-between;
				>view {
					height: 100%;
					width: 160upx;
					font-size: 34upx;
					line-height: 80upx;
					text-align: center;
					color: #999999;
				}
			}
			>view.search {
				width: 100%;
				>input {
					background-color: #eeeeee;
					width: 90%;
					margin: 0 auto;
					height: 70upx;
					border-radius: 10upx;
					text-align: center;
				}
			}
			>view.box {
				width: 100%;
				height: 100%;
				box-sizing: border-box;
				padding: 20upx 0;
				.picker-area {
					width: 100%;
					height: 100%;
					text-align: center;
				}

				.item {
					line-height: 34px;
				}
			}
		}
	}

	.beizhu {
		width: 100%;
		font-size: 24upx;
		color: #999999;
		box-sizing: border-box;
		padding: 50upx;
		text-align: center;
	}

	.button-box {
		font-size: 26upx;
		margin: 20upx auto;
		border-radius: 20upx;
		box-sizing: border-box;
		padding: 8upx 0;

		>view {
			font-size: 22upx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
	}
	.attention {
		width: 460rpx!important;
		color: #ff1e10;
		font-size: 22rpx!important;
		display: inherit!important;
		text-align: left;
		margin-left: 148rpx;
		height: auto!important;
	}
	.btn-box{
		display: flex;
		align-items: center;
		justify-content: space-between!important;
		padding: 100upx 20upx 0;
		>button{margin: 0;}
		.left-btn{ width: 240upx; background: #5cd6c9 }
		.right-btn{ width: 344upx; }
	}
</style>